<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0" />
<meta name="mobileOptimized" content="240" />
<meta name="format-detection" content="telephone=no" />
<title>dom元素的操作基本方法</title>
</head>
<body>
<ul id="dom">
	<li class="one">one123<span>dom-one-123</span></li>
	<li class="one">one123</li>
	<li name="wang">wang123</li>
	<li name="wang">wang123</li>
	<li class="wang">123</li>
	<li class="wang">123</li>
	<li>123</li>
	<li>123</li>
	<li>123</li>
	<li>123</li>
	<li>123</li>
	<li>123</li>
</ul>


<button onclick="add();">添加元素</button>
<button onclick="find();">查找元素</button>
<button onclick="finded();">查找元素高级方法</button>
<button onclick="finded1();">查找元素基本方法性能</button>
<button onclick="finded2();">查找元素高级方法性能</button>
<button onclick="paiting();">低性能重绘</button>
<button onclick="paiting2();">相对高新能重绘</button>
<button onclick="paiting3();">再高相对高新能重绘</button>
<button onclick="paiting4();">再再高相对高新能重绘</button>
<button onclick="paiting5();">在再再高相对高新能重绘</button>


<script type="text/javascript">



var scriptOjbs = document.getElementById("dom");
function add(){
	//添加节点元素两个方法，innerHTML,appendChild
	scriptOjbs.innerHTML = "<li>1</li>";
	
	var li = document.createElement("li");
	li.innerHTML = 2;
	scriptOjbs.appendChild(li);
}


function find(){
	
	document.getElementById("dom")
	document.getElementsByClassName("one");
	document.getElementsByName("wang");//返回的是nodeList对象
	document.getElementsByTagName("li");
	
}

function finded(){
	console.dir(document.querySelector("#dom"));
	console.dir(document.querySelectorAll(".one"));
}

/**
 * 
 query和直接使用getElement..方式得到的对象有区别，但是性能也有不同
 querySelector：使用便利，不用时时维护dom对象内容同步，但是读取性能并不是太好
 getElementBy...：使用不是太方便。但是读取性能好。系统会同步dom维护对象
 */

function finded1(){
	var star = new Date();
	for(var i=0;i<100000;i++){
		document.getElementById("dom");
		//document.getElementsByClassName("one")
		//firstChild和Element等区别
		//document.getElementById("dom").firstElementChild.firstElementChild;
		
		//----------多个对象选择
		
		
		//document.getElementById("dom").firstElementChild.firstElementChild;
		//document.getElementsByClassName("wang");
		
	}
	console.log(new Date()-star);
}

function finded2(){
	var star = new Date();
	for(var i=0;i<100000;i++){
		document.querySelector("#dom");
		//document.querySelectorAll(".one")
		//document.querySelector("#dom .one span");
		//----------多个对象选择
		
		//document.querySelector("#dom .one span,#dom .wang");
	}
	console.log(new Date()-star);
}


/**
 * 关于js改变页面css属性的时候的一些技巧
 */
function paiting(){
	var star = new Date();
	var li = document.querySelector("#dom li");
	for(var i=0;i<100000;i++){
		li.style.width = (i/1000)+"px";
		li.style.height = (i/1000)+"px";
	}
	console.log(new Date()-star);
	
}
function paiting2(){
	var star = new Date();
	var li = document.querySelector("#dom li");
	
	for(var i=0;i<10000;i++){
		li.cssText = "width:"+(i/100)+"px;"+"height:"+(i/100)+"px;";
	}
	
	console.log(new Date()-star);
}
function paiting3(){
	var star = new Date();
	var li = document.querySelector("#dom li");
	li.style.display="none";
	for(var i=0;i<10000;i++){
		li.style.width = (i/100)+"px";
		li.style.height = (i/100)+"px";
	}
	li.style.display="block";
	console.log(new Date()-star);
}
function paiting4(){
	var star = new Date();
	var li = document.querySelector("#dom li");
	li.style.display="none";
	for(var i=0;i<10000;i++){
		li.cssText = "width:"+(i/100)+"px;"+"height:"+(i/100)+"px;";
	}
	li.style.display="block";
	console.log(new Date()-star);
}
function paiting5(){
	var star = new Date();
	var li = document.querySelector("#dom li");
	li.style.visibility = "hidden";
	for(var i=0;i<10000;i++){
		li.cssText = "width:"+(i/100)+"px;"+"height:"+(i/100)+"px;";
	}
	li.style.visibility="visible";
	console.log(new Date()-star);
}

</script>
</body>
</html>